<template>
  <div class="app-container">
    <el-tabs v-model="activetable">
      <el-tab-pane label="订单管理" name="first">
        <el-form label-width="90px" label-position="right">
          
          <el-row :gutter="30">
            <el-col :span="4">
              <el-form-item label="邀请ID：">
                <el-input v-model="searchData.invite_member_id" placeholder="邀请ID" />
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item label="车队编号：">
                <el-input v-model="searchData.car_fleet_id" placeholder="车队编号"/>
              </el-form-item>
            </el-col>
            <!-- npm -->
            <el-col :span="8">
              <el-form-item label="订单时间：">
                <el-date-picker
                v-model="rangeTime"
                type="datetimerange"
                
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                value-format='yyyy-MM-dd HH:mm:ss'
                align="right">
              </el-date-picker>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-button type="primary" icon="el-icon-search" @click="doFilter">搜索</el-button>
            </el-col>
          </el-row>
      
        </el-form>
        <el-table
          v-loading="listLoading"
          :data="list"
          width="100%"
          height="600"
          style="overflow: auto"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row>
          
          <el-table-column label="乘客昵称"  align="center">
            <template slot-scope="scope">
              {{ scope.row.nickname }}
            </template>
          </el-table-column>
          <el-table-column label="认证时间"  align="center">
            <template slot-scope="scope">
              {{ scope.row.created_at }}
            </template>
          </el-table-column>
          <el-table-column label="邀请人"  align="center">
            <template slot-scope="scope">
              {{ scope.row.invite_nickname }}
            </template>
          </el-table-column>
          <el-table-column label="邀请ID"  align="center">
            <template slot-scope="scope">
              {{ scope.row.invite_member_id}}
            </template>
          </el-table-column>
          
          <el-table-column label="所属车队"  align="center">
            <template slot-scope="scope">
              <span>{{ scope.row.car_fleet_name }}</span> 
            </template>
          </el-table-column>

          <el-table-column label="车队编号"  align="center">
            <template slot-scope="scope">
              {{ scope.row.car_fleet_id }}
            </template>
          </el-table-column>
         <el-table-column label="所在城市"  align="center">
            <template slot-scope="scope">
              {{ scope.row.city_name }}
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          :current-page="currentPage"
          :page-sizes="[10, 20, 50]"
          :page-size="pageSize"
          :total="total"
          background
          class="pagination"
          layout=" prev, pager, next, sizes, total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
        
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import { getUser, memberList} from '@/api/table'
//import { login2 } from '@/api/login'
 import { getToken } from '@/utils/auth'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      orderOptions: [{
        value: '0',
        label: '已取消'
      }, {
        value: '10',
        label: '等待接单'
      }, {
        value: '20',
        label: '已接单'
      }, {
        value: '30',
        label: '行驶中'
      }, {
        value: '40',
        label: '订单完成'
      }],
      dialogCompanyVisible: false,
      rangeTime:[],
      searchData: {
        invite_member_id: '',
        city_name:'',
        start_at:'',
        end_at:'',
        car_fleet_id:'',
      },
      activetable: 'first',
      list: null,
      listLoading: true,

     
      dateList: [],
      personelRecords: [],
      activeName: 'baseInfo', 
      num: 0,
      currentPage: 1,
      page: 1,
      pageSize: 10,
      pageNum: 1,
      total: 0
      // noImgF: true,
      // noImgB: true
    }
  },
  created() {
    this.fetchData()
  },

  methods: {
    fetchData(data) {
      this.listLoading = true
      
      var reqData = this.searchData
      reqData.page = this.pageNum
      reqData.size = this.pageSize
      const page = this.pageNum
      const size = this.pageSize
      // var rid = this.$route.query.rid
      memberList(reqData).then(response => {
        console.log(response)
        var res = response.result
        this.total = res.total
        this.list = res.list
        this.listLoading = false
      })
    },

    
    selectedOptionsChange(value) {
      this.fetchData(data)
    },
    doFilter() {
      var data = this.searchData
      console.log(data)
      if(!this.rangeTime){
        data.start_at = ''
        data.end_at = ''
      }else{
        data.start_at = this.rangeTime[0]||''
        data.end_at = this.rangeTime[1]||''
      }
      
      // var rid = getRid()
      
      this.fetchData(data)
    },
    
    // 分页组件，点击某一页
    handleCurrentChange(val) {
      this.listLoading = true
      this.pageNum = val
      this.fetchData()
    },
    // 分页组件，改变每页展示条数
    handleSizeChange(val) {
      this.listLoading = true
      this.pageSize = val
      this.fetchData()
    }
  }
}
</script>

<style scoped>
  .card-img{
    display:inline-block;
    vertical-align: middle;
    margin: 0 5px;
    cursor: pointer;
    width: 40%;
    height: auto;
  }
  .recordsArea {
    height: 400px;
    margin-top: 20px;
    overflow: auto;
    white-space: nowrap;
  }
  .dayAttendance {
    width: 300px;
    height: 380px;
    margin-right:20px;
    display: inline-block;
  }
  .attendanceHeader {
    width: 300px;
    line-height: 30px;
    text-align: center;
    background: #C1C1C1;
  }
  .time-line{
    position: relative;
    width:300px;
    height: 300px;
    margin:0 auto;
    overflow-y: auto;
    border: 1px solid #ddd;
  }
  .time-line-div{
    position:relative;
    min-height:80px;
    white-space: normal;
  }
  .time-line-div>p:nth-child(1){
    position: absolute;
    left:15px;
    width:100px;
  }
  .time-line-div>p:nth-child(2){
    position:absolute;
    left: 100px;
    width:15px;
    height:15px;
    top:10px;
    background:#5CB85C;
    border-radius: 50%;
    z-index: 10;
  }
  .line-top {
    position:absolute;
    width: 15px;
    height: 80px;
    top: 13px;
    left: 106px;
    border-left: 2px solid #cdcdcd;
    z-index: 1;
  }
  .time-line-div>p:nth-child(3){
    position:absolute;
    left: 130px;
    padding: 10px;
    background: #317EF3;
    font-size:.8rem;
    color:#fff;
    border-radius: 10px;
  }

  .time-line-detail>p{
    margin-left: 30px;
    margin-bottom: 10px;
  }
  .paneStyle {
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .userPhotoSize {
    width: 105px;
    height: 150px;
    border: 1px solid #ddd;
  }
  .uploadDiv {
    height: 60px;
    margin-bottom: 20px;
  }
  .maskDiv {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    /*z-index: -1;*/
    display: flex;
    justify-content:center;
    align-items:center;
  }
  .mask {
    height:100%;
  }
  .maskPic {
    opacity: 1;
    max-height: 100%;
  }
  .arrowLeft {
    font-size: 42px;
    position: absolute;
    top: 48%;
    left:30px;
    color: #fff;
  }
  .arrowRight {
    font-size: 42px;
    position: absolute;
    top: 48%;
    right:30px;
    color: #fff;
  }
  .imgDelete {
    width: 170px;
    position: absolute;
    bottom: 50px;
    right: 50%;
    margin: 0 -85px;
  }
  .avatar-uploader {
    border: 1px dashed #d9d9d9;
    width: 178px;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 120px;
    line-height: 120px;
    text-align: center;
  }
  .avatar {
    width: 178px;
    height: 120px;
    display: block;
  }
  .uploadTip {
    text-align: left;
    color:#777;
    margin-top: 15px;
    font-size:10px;
  }
  .pagination {
    margin: 20px 0 80px 0;
    text-align: center;
  }

</style>
